<script lang="ts" setup>
import { computed, ref } from 'vue';

import { message, Modal, Textarea } from 'ant-design-vue';

import { rejectInvoice } from '#/api';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:show', 'initList']);

const showModal = computed({
  get() {
    return props.show;
  },
  set(newValue) {
    emit('update:show', newValue);
  },
});

// 驳回理由
const rejectReason = ref<string>('');
// 未填写的错误状态
const errorStart = ref<string>('');
// 加载
const confirmLoading = ref(false);

// 确认事件
const handleOk = async () => {
  if (!rejectReason.value) {
    errorStart.value = 'err';
    return;
  }
  try {
    await rejectInvoice({
      id: props.data.id,
      refuseReason: rejectReason.value,
    });
    message.success('操作成功');
    rejectReason.value = '';
    confirmLoading.value = false;
    showModal.value = false;
    emit('initList');
  } catch (error) {
    confirmLoading.value = false;
    console.error('驳回失败：', error);
  }
};
</script>
<template>
  <div>
    <Modal
      v-model:open="showModal"
      :confirm-loading="confirmLoading"
      title="驳回申请"
      @ok="handleOk"
    >
      <div class="pb-4">
        <Textarea
          v-model:value="rejectReason"
          :auto-size="{ minRows: 6, maxRows: 6 }"
          :maxlength="200"
          :show-count="true"
          :status="errorStart === 'err' ? 'error' : ''"
          placeholder="请填写驳回开票原因"
          @focus="errorStart = ''"
        />
      </div>
      <div v-if="errorStart" class="text-red-500">请填写驳回原因</div>
    </Modal>
  </div>
</template>
<style scoped lang="scss">
.image-list {
  width: 148px;
  height: 148px;
}
</style>
